<template>
  <div class="bg-white rounded-lg shadow p-4 lg:p-6">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-xl font-semibold text-gray-700">联系表单提交</h2>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">联系方式
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">需求
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态
            </th>
            <!-- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">提交时间
            </th> -->
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr v-for="(submission, index) in modelValue" :key="submission.id || index">
            <td class="px-6 py-4 whitespace-nowrap">
              <input v-model="submission.name" type="text"
                class="w-full px-2 py-1 border-b border-transparent focus:border-gray-300 focus:outline-none">
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <input v-model="submission.contact_info" type="text"
                class="w-full px-2 py-1 border-b border-transparent focus:border-gray-300 focus:outline-none">
            </td>
            <td class="px-6 py-4">
              <textarea v-model="submission.requirements" rows="1"
                class="w-full px-2 py-1 border-b border-transparent focus:border-gray-300 focus:outline-none"></textarea>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <select v-model="submission.status"
                class="w-full px-2 py-1 text-sm border border-gray-200 rounded focus:outline-none focus:ring-1 focus:ring-indigo-500">
                <option value="pending">待处理</option>
                <option value="processing">处理中</option>
                <option value="completed">已完成</option>
              </select>
            </td>
            <!-- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" v-if="submission?.created_at">
              {{ formatDate(submission.created_at) }}
            </td> -->
            <td class="px-6 py-4 whitespace-nowrap text-sm">
              <button @click="removeSubmission(index)" class="text-red-600 hover:text-red-800">
                <div class="h-5 w-5">保存</div>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ContactSubmission } from '~/types/home';

const props = defineProps<{
  modelValue: ContactSubmission[];
}>()

const emit = defineEmits(['update:modelValue'])

const formatDate = (dateString: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
}

const removeSubmission = (index: number) => {
  const newSubmissions = [...props.modelValue]
  newSubmissions.splice(index, 1)
  emit('update:modelValue', newSubmissions)
}
</script>